import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  const LayoutDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('布局组件示例')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          // Container 示例
          const Text('Container - 容器组件:', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 10),
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.blue[100],
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.blue),
            ),
            child: const Text('这是一个Container'),
          ),

          const SizedBox(height: 20),

          // Row 示例
          const Text('Row - 水平布局:', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.green,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.blue,
                ),
              ],
            ),
          ),

          const SizedBox(height: 20),

          // Column 示例
          const Text('Column - 垂直布局:', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 10),
            child: Column(
              children: [
                Container(
                  height: 50,
                  color: Colors.orange,
                  alignment: Alignment.center,
                  child: const Text('Item 1'),
                ),
                const SizedBox(height: 10),
                Container(
                  height: 50,
                  color: Colors.purple,
                  alignment: Alignment.center,
                  child: const Text('Item 2'),
                ),
              ],
            ),
          ),

          const SizedBox(height: 20),

          // Stack 示例
          const Text('Stack - 层叠布局:', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 10),
            height: 100,
            child: Stack(
              children: [
                Container(
                  color: Colors.yellow,
                ),
                const Positioned(
                  left: 20,
                  top: 20,
                  child: Icon(Icons.star, size: 30),
                ),
                const Positioned(
                  right: 20,
                  bottom: 20,
                  child: Text('Stack Demo'),
                ),
              ],
            ),
          ),

          const SizedBox(height: 20),

          // Wrap 示例
          const Text('Wrap - 流式布局:', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 10),
            child: Wrap(
              spacing: 8,
              runSpacing: 8,
              children: [
                Chip(label: const Text('标签1')),
                Chip(label: const Text('较长的标签2')),
                Chip(label: const Text('标签3')),
                Chip(label: const Text('很长的标签4')),
                Chip(label: const Text('标签5')),
              ],
            ),
          ),

          const SizedBox(height: 20),

          // Expanded 示例
          const Text('Expanded - 弹性布局:', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 10),
            height: 50,
            child: Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Container(color: Colors.red),
                ),
                Expanded(
                  flex: 2,
                  child: Container(color: Colors.green),
                ),
                Expanded(
                  flex: 1,
                  child: Container(color: Colors.blue),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
} 